<template>
  <Page :title="navTitle">
    <template #navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff">{{ navTitle }}</span>
        </div>
      </div>
    </template>
    <template #content>
      <div class="w-full h-full">
        <div
          class="container w-full h-full flex flex-col bg-white p-20px box-border overflow-scroll"
        >
          <!-- 作业内容 -->
          <div class="task mb-20px">
            <div class="module-item flex items-center font-medium">
              <div class="rect mr-6px"></div>
              <div class="title">
                <span class="font-bold">作业内容</span>
              </div>
            </div>
            <div class="content">{{ stem }}</div>
          </div>
          <!-- 图片说明 -->
          <div class="task mb-20px">
            <div class="module-item flex items-center">
              <div class="rect mr-6px"></div>
              <div class="title font-bold">图片说明</div>
            </div>
            <div class="content img-content">
              <el-image
                v-for="(img, imgIndex) in showImgs"
                :key="img"
                :src="img"
                fit="contain"
                class="img-item"
                :preview-src-list="showImgs"
                :initial-index="imgIndex"
              />
            </div>
          </div>
          <!-- 我的作答 -->
          <div class="answer mb-10px">
            <div class="module-item flex items-center font-medium">
              <div class="rect mr-6px"></div>
              <div class="title flex items-center">
                <span class="font-bold">我的作答</span>
                <span class="font-normal text-9CADBB ml-8px" style="font-size: 0.16rem">{{
                  studentAnswerTime ? `提交于${studentAnswerTime}` : ``
                }}</span>
              </div>
            </div>
            <div class="content">{{ studentAnswer }}</div>
          </div>
          <!-- 上传的文件 -->
          <div class="files mb-10px">
            <div class="list-wrap" v-if="studentAnswerFileList.length">
              <div
                class="inline-block relative"
                v-for="(file, index) in studentAnswerFileList"
                :key="index"
                @click="openFile(file)"
              >
                <!-- 图片 -->
                <div class="item" v-if="file.type === 'photo'">
                  <el-image class="photo" :src="file.fileUrl" :preview-src-list="[file.fileUrl]" />
                </div>
                <!-- 视频 -->
                <div class="item" v-else-if="file.type === 'video'">
                  <VideoPreviewer :src="file.fileUrl" />
                </div>
                <!-- 其它 -->
                <div class="item" v-else>
                  <el-image class="other" :src="file.icon" />
                </div>
              </div>
            </div>
          </div>
          <!-- 批改结果 -->
          <div class="result">
            <div class="module-item flex items-center font-medium">
              <div class="rect mr-6px"></div>
              <div class="title flex items-center">
                <span class="font-bold">批改结果</span>
                <span
                  class="font-normal text-9CADBB ml-8px"
                  style="font-size: 0.16rem"
                  v-show="studentAnswer && studentAnswer !== '无'"
                  >{{ teacherCommentTime ? `批改于${teacherCommentTime}` : `(待批改)` }}</span
                >
              </div>
            </div>
            <div class="content" v-if="teacherCommentTime">
              <div>
                评分：<span class="text-30C9A1" v-show="studentGrade && studentGrade !== '无'">{{
                  studentGrade
                }}</span>
              </div>
              <div class="flex mt-10px">
                <div>评语：</div>
                <div class="teacher-comment flex-1 p-20px box-border bg-F4F7FB">{{
                  teacherComment
                }}</div>
                <div
                  class="flex items-end ml-50px mr-30px"
                  v-show="studentGrade && studentGrade !== '无'"
                >
                  <Grade :value="studentGrade" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import { mapState } from 'vuex'
import Page from '@/components/page/newPage'
import Grade from './components/grade'
import VideoPreviewer from '@/components/video/previewer'
import { getExamStudentQuestions } from '@/api/homework'
import { getFileSuffix, getFileName } from '@/utils'
import ppt from '@/assets/learning/ppt.png'
import xlsx from '@/assets/learning/xlsx.png'
import pdf from '@/assets/learning/pdf.png'
import photo from '@/assets/learning/photo.png'
import video from '@/assets/learning/vedio.png'
import word from '@/assets/learning/word.png'
import audio from '@/assets/learning/audio.png'
import other from '@/assets/learning/other.png'
import axios from 'axios'

const fileTypes = [
  {
    type: 'ppt',
    icon: ppt, // ppt
    suffixes: ['pptx', 'ppt']
  },
  {
    type: 'xlsx',
    icon: xlsx, // 表格
    suffixes: ['xlsx', 'xls', 'csv']
  },
  {
    type: 'pdf',
    icon: pdf, // pdf
    suffixes: ['pdf']
  },
  {
    type: 'photo',
    icon: photo, // 图片
    suffixes: ['bmp', 'jpg', 'jpeg', 'png', 'gif']
  },
  {
    type: 'video',
    icon: video, // 视频
    suffixes: ['avi', 'wmv', 'mpg', 'mpeg', 'mov', 'rm', 'ram', 'swf', 'flv', 'mp4']
  },
  {
    type: 'word',
    icon: word, // 文档
    suffixes: ['txt', 'doc', 'docx']
  },
  {
    type: 'audio',
    icon: audio, // 音频
    suffixes: ['mp3', 'wav', 'wma', 'mp2', 'flac', 'midi', 'ra', 'ape', 'aac', 'cda', 'm4a']
  }
]

export default {
  components: {
    Page,
    Grade,
    VideoPreviewer
  },
  data() {
    return {
      showImgs: []
    }
  },
  computed: {
    ...mapState(['homework']),
    currentHomework() {
      return this.homework.currentHomework
    },
    currentQuestion() {
      const { questions, questionIndex } = this.currentHomework
      return questions[questionIndex]
    },
    stem() {
      return this.currentQuestion.stem
    },
    studentAnswer() {
      const { remoteStudentAnswer } = this.currentQuestion

      return remoteStudentAnswer
        ? remoteStudentAnswer.studentAnswer
          ? remoteStudentAnswer.studentAnswer
          : '无'
        : ''
    },
    studentAnswerTime() {
      const { remoteStudentAnswer } = this.currentQuestion

      return remoteStudentAnswer
        ? remoteStudentAnswer.upTime
          ? this.$utils.parseTime(remoteStudentAnswer.upTime, '{y}-{m}-{d} {h}:{i}:{s}')
          : ''
        : ''
    },
    studentAnswerFiles() {
      const { remoteStudentAnswer } = this.currentQuestion

      try {
        return JSON.parse(remoteStudentAnswer.studentAnswerUrl).studentAnswerFiles
      } catch (error) {
        return []
      }
    },
    studentAnswerFileList() {
      const { studentAnswerFiles } = this
      const fileList = []

      const fileListTemp = studentAnswerFiles.map((fileUrl) => {
        const suffix = getFileSuffix(fileUrl)
        const fileType = fileTypes.find((item) => {
          if (item.suffixes.indexOf(suffix) != -1) {
            return true
          } else {
            return false
          }
        })
        const { icon, type } = fileType ? fileType : { icon: other, type: 'other' }
        const fileName = getFileName(fileUrl)

        return {
          fileName,
          fileUrl,
          icon,
          type
        }
      })
      fileList.push(...fileListTemp)

      return fileList
    },
    teacherComment() {
      const { remoteStudentAnswer } = this.currentQuestion

      return remoteStudentAnswer
        ? remoteStudentAnswer.teacherComment
          ? remoteStudentAnswer.teacherComment
          : '无'
        : ''
    },
    teacherCommentTime() {
      const { remoteStudentAnswer } = this.currentQuestion

      return remoteStudentAnswer
        ? remoteStudentAnswer.markingTime
          ? this.$utils.parseTime(remoteStudentAnswer.markingTime, '{y}-{m}-{d} {h}:{i}:{s}')
          : ''
        : ''
    },
    studentGrade() {
      const { remoteStudentAnswer } = this.currentQuestion

      return remoteStudentAnswer
        ? remoteStudentAnswer.studentGrade
          ? remoteStudentAnswer.studentGrade
          : '无'
        : ''
    },
    navTitle() {
      const {
        record: { examName }
      } = this.currentHomework

      return examName
    }
  },
  watch: {},
  created() {
    this.init()
    this.getImages()
  },
  mounted() {},
  methods: {
    back() {
      this.$router.back()
    },
    async init() {
      const {
        record: { id },
        questions
      } = this.homework.currentHomework

      const { data } = await getExamStudentQuestions({
        examId: id
      })

      if (Array.isArray(questions)) {
        questions.forEach((i) => {
          const remoteStudentAnswerItem = data.find((item) => item.questionId === i.questionId)

          this.$set(i, 'remoteStudentAnswer', remoteStudentAnswerItem)
        })
      }
    },
    getImages() {
      let that = this
      const {
        record: { additionalDataUrl }
      } = this.currentHomework
      if (additionalDataUrl) {
        axios({
          method: 'get',
          url: additionalDataUrl,
          responseType: 'json'
        }).then((res) => {
          let data = res.data
          if (data) {
            that.showImgs = data['showImgs']
          }
        })
      }
    },
    openFile(file) {
      const { android, android_call } = window
      const { fileName, fileUrl, type } = file

      switch (type) {
        case 'photo':
          break
        case 'video':
          if (android && android_call) {
            const onEnded = () => {}
            const callBackName = `fn${new Date().getTime()}`
            android_call[callBackName] = onEnded.bind(this)
            android.openVideo(fileUrl, fileName, callBackName)
          }
          break
        default:
          // other
          if (android && android_call) {
            const callback = () => {}
            const callBackName = `fn${new Date().getTime()}`
            window.android_call[callBackName] = callback.bind(this)
            android.openFile(fileUrl, fileName, callBackName)
          }
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
.nav-bar-btns {
  .item {
    height: 30px;
    .icon {
      width: 22px;
      height: 22px;
    }

    .name {
      font-size: 22px;
      line-height: 22px;
    }
  }
}

.container {
  .task,
  .answer,
  .result {
    .module-item {
      font-size: 26px;

      .rect {
        width: 4px;
        height: 26px;
        background: linear-gradient(180deg, #51c3ff 0%, #31b3f7 100%);
        border-radius: 3px;
      }

      .title {
        font-family: 'sans-serif';
      }
    }

    .content {
      font-size: 26px;
      line-height: 28px;
      margin-top: 8px;
      word-break: break-all;

      .teacher-comment {
        min-height: 200px;
        border-radius: 8px;
      }
    }
    .img-content {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .img-item {
        width: 120px;
        height: 120px;
        margin-right: 20px;
        margin-bottom: 20px;
        background: #f4f7fb;
      }
    }
  }

  .files {
    .list-wrap {
      display: inline-grid;
      grid-template-columns: 132.5px 132.5px 132.5px 132.5px 132.5px 132.5px 132.5px 132.5px;
      grid-column-gap: 20px;
      grid-row-gap: 20px;

      .item {
        width: 132.5px;
        height: 132.5px;
        display: flex;
        justify-content: center;
        align-items: center;

        .photo {
          width: 132.5px;
          height: 132.5px;
        }

        .other {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}
</style>
